<template>
  <el-dialog
    v-model="dialogVisible"
    title="选择物品"
    width="80%"
    :before-close="handleClose"
  >
    <div class="item-dialog">
      <!-- 搜索和筛选区域 -->
      <div class="search-filter-area">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input
              v-model="searchForm.itemKeyword"
              placeholder="请输入物品编号/名称/型号"
              clearable
            />
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="searchForm.brand"
              placeholder="请输入品牌"
              clearable
            />
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="searchForm.itemCategory"
              placeholder="请选择物品分类"
              style="width: 100%"
              clearable
            >
              <el-option label="原材料" value="原材料" />
              <el-option label="半成品" value="半成品" />
              <el-option label="成品" value="成品" />
              <el-option label="包装材料" value="包装材料" />
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-select
              v-model="searchForm.inventoryStatus"
              placeholder="库存状态"
              style="width: 100%"
              clearable
            >
              <el-option label="有库存" value="有库存" />
              <el-option label="无库存" value="无库存" />
              <el-option label="库存不足" value="库存不足" />
            </el-select>
          </el-col>
        </el-row>
        <div class="search-actions">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </div>

      <!-- 物品列表 -->
      <div class="item-list">
        <el-table
          :data="itemList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="serialNumber" label="序号" width="80" />
          <el-table-column prop="itemNumber" label="物品编号" width="150" />
          <el-table-column prop="itemName" label="物品名称" width="200" />
          <el-table-column prop="specificationModel" label="规格型号" width="150" />
          <el-table-column prop="unit" label="单位" width="100" />
          <el-table-column prop="itemCategory" label="物品分类" width="120" />
          <el-table-column prop="brand" label="品牌" width="120" />
          <el-table-column prop="inventory" label="库存" width="120">
            <template #default="scope">
              <span>{{ scope.row.inventory || '仓库' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'

// Props
const props = defineProps<{
  modelValue: boolean
}>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'select': [items: any[]]
}>()

// 响应式数据
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const searchForm = reactive({
  itemKeyword: '',
  brand: '',
  itemCategory: '',
  inventoryStatus: ''
})

const itemList = ref<any[]>([])
const selectedItems = ref<any[]>([])

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 5,
  total: 0
})

// 模拟物品数据
const mockItemList = [
  {
    id: 1,
    serialNumber: 1,
    itemNumber: 'CPBH2023512698',
    itemName: '随便吹空调',
    specificationModel: 'WM-2000-LAZY',
    unit: '台',
    itemCategory: '成品',
    brand: '懒人牌',
    inventory: '仓库'
  },
  {
    id: 2,
    serialNumber: 2,
    itemNumber: 'CPBH2023512699',
    itemName: '超能胶水',
    specificationModel: 'GLUE-1000-STRONG',
    unit: '瓶',
    itemCategory: '原材料',
    brand: '强力牌',
    inventory: '仓库'
  },
  {
    id: 3,
    serialNumber: 3,
    itemNumber: 'CPBH2023512700',
    itemName: '神奇螺丝',
    specificationModel: 'SCREW-500-MAGIC',
    unit: '个',
    itemCategory: '原材料',
    brand: '神奇牌',
    inventory: '仓库'
  },
  {
    id: 4,
    serialNumber: 4,
    itemNumber: 'CPBH2023512701',
    itemName: '无敌锤子',
    specificationModel: 'HAMMER-2000-INVINCIBLE',
    unit: '把',
    itemCategory: '成品',
    brand: '无敌牌',
    inventory: '仓库'
  },
  {
    id: 5,
    serialNumber: 5,
    itemNumber: 'CPBH2023512702',
    itemName: '隐形电线',
    specificationModel: 'WIRE-1000-INVISIBLE',
    unit: '米',
    itemCategory: '原材料',
    brand: '隐形牌',
    inventory: '仓库'
  }
]

// 方法
const loadItemList = async () => {
  try {
    // 这里应该调用真实的API
    // const response: any = await getItemList()
    // itemList.value = response.data || response.Data || []
    
    // 使用模拟数据
    itemList.value = mockItemList
    pagination.total = mockItemList.length
  } catch (error) {
    console.error('加载物品列表失败:', error)
  }
}

const handleSearch = () => {
  // 实现搜索逻辑
  let filteredItems = mockItemList

  if (searchForm.itemKeyword) {
    filteredItems = filteredItems.filter(item => 
      item.itemNumber.includes(searchForm.itemKeyword) ||
      item.itemName.includes(searchForm.itemKeyword) ||
      item.specificationModel.includes(searchForm.itemKeyword)
    )
  }

  if (searchForm.brand) {
    filteredItems = filteredItems.filter(item => 
      item.brand.includes(searchForm.brand)
    )
  }

  if (searchForm.itemCategory) {
    filteredItems = filteredItems.filter(item => 
      item.itemCategory === searchForm.itemCategory
    )
  }

  itemList.value = filteredItems
  pagination.total = filteredItems.length
  pagination.currentPage = 1
}

const handleReset = () => {
  Object.assign(searchForm, {
    itemKeyword: '',
    brand: '',
    itemCategory: '',
    inventoryStatus: ''
  })
  itemList.value = mockItemList
  pagination.total = mockItemList.length
  pagination.currentPage = 1
}

const handleSelectionChange = (selection: any[]) => {
  selectedItems.value = selection
}

const handleSizeChange = (size: number) => {
  pagination.pageSize = size
  pagination.currentPage = 1
}

const handleCurrentChange = (page: number) => {
  pagination.currentPage = page
}

const handleClose = () => {
  dialogVisible.value = false
  handleReset()
  selectedItems.value = []
}

const handleConfirm = () => {
  if (selectedItems.value.length > 0) {
    emit('select', selectedItems.value)
    dialogVisible.value = false
  }
}

// 生命周期
onMounted(() => {
  loadItemList()
})
</script>

<style scoped>
.item-dialog {
  max-height: 70vh;
  overflow-y: auto;
}

.search-filter-area {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.search-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.item-list {
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 